<template>
  <div class="app-container">
    <div class="filter-container">
      <el-row :gutter="20" span="24">
        <!--展示部门树-->
        <el-col :md="5" :sm="24" :xs="24">
          <div style="margin-bottom: 0px; display: flex; -webkit-box-align: center; align-items: center">
            <el-button-group>
              <el-button size="mini" type="primary" @click="created()"> 添加 </el-button>
              <el-button size="mini" type="primary" @click="updated()"> 修改 </el-button>
              <el-button size="mini" type="primary" @click="deleted()"> 删除 </el-button>
            </el-button-group>
          </div>
          <br />
          <el-tree
            ref="tree"
            :data="deptTrees.trees"
            node-key="id"
            :props="deptTrees.props"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            @node-click="deptNodeClick"
            default-expand-all
          >
          </el-tree>
        </el-col>
        <el-col :md="19" :sm="24" :xs="24">
          <div class = "dept_form_class">
            <el-form :model="deptForm" :rules="ruleFrom" ref="deptInfoFormRef" label-width="100px" class="demo-ruleForm">
              <el-form-item label="父级节点" prop="parentId">
                <el-input v-model="deptForm.parentId" disabled  placeholder="输入父级节点"></el-input>
              </el-form-item>
              <el-form-item label="节点编号" prop="id" :style="{ display: updateStyle }">
                <el-input v-model="deptForm.id"  :disabled="updateDisabled"  placeholder="输入节点编号"></el-input>
              </el-form-item>
              <el-form-item label="部门名称" prop="name">
                <el-input v-model="deptForm.name" :disabled="updateDisabled" placeholder="输入部门名称"></el-input>
              </el-form-item>
              <el-form-item label="排序" prop="sort">
                <el-input v-model="deptForm.sort" :disabled="updateDisabled" placeholder="输入排序"></el-input>
              </el-form-item>
              <el-form-item :style="{ display: visibleCancel }">
                <el-button type="primary" @click="dialogStatus === 'create'? saveDeptInfo() : upDeptInfo() ">{{dialogStatus === 'create' ? '保存' : '更新'}}</el-button>
                <el-button @click="onClose">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { getDeptTree, getDeptInfoByDeptId, saveDeptInfo, upDeptInfo, deleteDept } from '@/api/dept'
  export default {
    name: 'Dept',
    data() {
      return {
        updateDisabled: true,
        visibleCancel: 'none',
        updateStyle: '',
        dialogStatus: '',
        deptTrees: {
          trees: [],
          props: {
            children: 'children',
            label: 'name'
          }
        },
        public: {
          deptId: undefined
        },
        deptForm: {
          id: undefined,
          name: '',
          sort: '', // 排序
          parentId: '', // 上级部门
          parentName: '' // 上级部门
        },
        // 添加表单的验证规则对象
        ruleFrom: {
          parentId: [
            { required: true, message: '请输入父级节点', trigger: 'blur' },
          ],
          name: [
            { required: true, message: '请输入部门名称', trigger: 'blur' },
          ],
          sort: [
            { required: true, message: '请输入排序', trigger: 'blur' },
          ]
        }
      }
    },
    created() {
      this.deptTree()
      // this.getDeptInfoByDeptId('')
    },
    methods: {
      resetForm() {
        this.$refs.deptInfoFormRef.resetFields()
      },
      deptTree() {
        getDeptTree().then(({ data }) => {
          this.deptTrees.trees = data
        }).catch(error => {
          console.log(error)
        })
      },
      deptNodeClick() {
        if(this.$refs.tree.getCurrentKey() !==  this.public.deptId){
          this.dialogStatus = 'updated'
        }
        this.public.deptId = this.$refs.tree.getCurrentKey()
        this.getDeptInfoByDeptId(this.public.deptId)
      },
      getDeptInfoByDeptId(deptId) {
        getDeptInfoByDeptId(deptId).then(({ data }) => {
          console.log("data", data)
          this.public.deptId = data.id
          this.deptForm = data
        }).catch(error => {
          console.log(error)
        })
      },
      created() {
        this.visibleCancel = ''
        this.updateStyle = 'none'
        this.updateDisabled = false
        this.dialogStatus = 'create'
        if (this.deptForm.parentId == '' || this.deptForm.parentId == undefined) {
          this.deptForm.parentId = 0
        }
        this.deptForm.id = undefined
        this.deptForm.name = ''
        this.deptForm.sort = ''
      },
      updated() {
        if(this.deptForm.parentId === undefined || this.deptForm.parentId === '') {
          return this.$notify.warning({
            title: '警告',
            message: '请先选择节点'
          })
        }
        this.visibleCancel = ''
        this.updateStyle = 'none'
        this.updateDisabled = false
        this.dialogStatus = 'update'
        if(this.deptForm.parentId == '' || this.deptForm.parentId == undefined){
          this.deptForm.parentId = 0
        }
      },
      deleted() {
        if(this.deptForm.parentId === undefined || this.deptForm.parentId === '') {
          return this.$notify.warning({
            title: '警告',
            message: '请先选择节点'
          })
        }
        this.$confirm('您确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteDept(this.public.deptId).then(() => {
            this.$notify.success({
              title: '成功',
              message: '删除成功'
            })
            this.deptTree()
            this.deptForm = {}
            // this.getDeptInfoByDeptId(-1)
          }).catch(() => {
            this.$notify.error({
              title: '错误',
              message: '删除失败'
            })
          })
        })
      },
      saveDeptInfo() {
        this.$refs.deptInfoFormRef.validate((valid) => {
          if (valid) {
            saveDeptInfo(this.deptForm).then(({ data }) => {
              this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success',
                duration: 2000
              })
              this.visibleCancel = 'none'
              this.updateStyle = ''
              this.updateDisabled = true
              this.getDeptInfoByDeptId(this.public.deptId === undefined ? '' : this.public.deptId)
              this.deptTree()
            }).catch(() => {
              this.$notify({
                title: '失败',
                message: '添加失败',
                type: 'error',
                duration: 2000
              })
            })
          }
        })
      },
      upDeptInfo() {
        this.$refs.deptInfoFormRef.validate((valid) => {
          if (valid) {
            upDeptInfo(this.deptForm).then(({ data }) => {
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
              this.deptTree()
              // this.getDeptInfoByDeptId(this.public.deptId)
              this.visibleCancel = 'none'
              this.updateStyle = ''
              this.updateDisabled = true
            }).catch(() => {
              this.$notify({
                title: '失败',
                message: '更新失败',
                type: 'error',
                duration: 2000
              })
            })
          }
        })
      },
      onClose() {
        this.visibleCancel = 'none'
        this.updateStyle = ''
        this.updateDisabled = true
        if(this.deptForm.parentId == '' || this.deptForm.parentId == undefined){
          this.deptForm.parentId = ''
        }
        this.getDeptInfoByDeptId(this.public.deptId)
      },
      filterNode(value, data, node) {
        if (!value) {
          return true
        }
        const _array = []
        this.getReturnNode(node, _array, value)
        let result = false
        _array.forEach(item => {
          result = result || item
        })
        return result
      },
      getReturnNode(node, _array, value) {
        const isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1
        isPass ? _array.push(isPass) : ''
        this.index++
        console.log(this.index)
        if (!isPass && node.level !== 1 && node.parent) {
          this.getReturnNode(node.parent, _array, value)
        }
      }
    }
  }
</script>

<style type="scss">
  .button_left{
    margin-left: 0.5px;
  }
  .dept_form_class{
    margin-top: 50px;
    margin-left: 40px
  }

</style>
